<template>
	<view>
		<u-modal id="modal" 
			:show="isShow" 
			:title="title" 
			:content="content" 
			:showCancelButton="showCancelButton" 
			:confirmText="confirmText" 
			:cancelText="cancelText"
			@cancel="cancelFun" 
			@confirm="confirmFun" 
			:confirm-color="confirmColor"
		></u-modal>
	</view>
</template>

<script>
	// 在需要的页面中注册当前组件，
	// this.$refs.modal.open({
	// 	content: '确定要删除？',
	// 	success: () => {
	// 		console.log('modal success')
	// 	},
	// 	cancel: () => {
	// 		console.log('modal cancel')
	// 	}
	// })
	export default {
		name: "Modal",
		data() {
			return {
				isShow: false,
				title: '',
				content: '',
				showCancelButton: true,
				confirmText: '',
				cancelText: '',
				success: function(){},
				cancel: function(){},
				confirmColor: '#FE5A13'
			};
		},
		created(){
		},
		methods: {
			init(){
				this.title = '提示'
				this.content = '主要内容'
				this.showCancelButton = true
				this.confirmText = '确定'
				this.cancelText = '取消'
				this.success = function(){}
				this.cancel = function(){}
			},
			open(initParam = {}) {
				this.init();
				this.title = initParam.title || this.title;
				this.content = initParam.content || this.content;
				if(initParam.showCancelButton != undefined){
					this.showCancelButton = initParam.showCancelButton;
				}
				this.confirmText = initParam.confirmText || this.confirmText;
				this.cancelText = initParam.cancelText || this.cancelText;
				this.success = initParam.success || this.success;
				this.cancel = initParam.cancel || this.cancel;
				this.isShow = true
			},
			close(){
				this.isShow = false
			},
			cancelFun() {
				this.close()
				this.cancel();
			},
			confirmFun() {
				this.close()
				this.success();
			}
		}
	}
</script>

<style lang="scss">

</style>